/** * Create by mzq * Description: 左侧当日健康特征统计 * Date: 2024/9/13 11:23 * Update: 2024/9/13
11:23 */
<template>
  <div class="bg">
    <div class="title flex justify-center">当日健康特征统计</div>

    <div class="flex pl-[0.0417rem] pr-[0.0417rem]">
      <div class="w-full mr-[0.026rem]">
        <BlackBorder title="当日用户健康特征统计">
          <template #content>
            <div class="flex flex-col">
              <div class="flex flex-wrap mt-[10px]">
                <div class="w-1/2 flex flex-col justify-center items-center">
                  <Healthy :reqData="reqData"></Healthy>
                </div>
                <div class="w-1/2 flex flex-col justify-center items-center">
                  <SubHealth :reqData="reqData"></SubHealth>
                </div>
                <div class="mt-[0.03125rem] w-1/2 flex flex-col justify-center items-center">
                  <Risk :reqData="reqData"></Risk>
                </div>
                <div class="mt-[0.03125rem] w-1/2 flex flex-col justify-center items-center">
                  <Disease :reqData="reqData"></Disease>
                </div>
              </div>
              <div>
                <DailyHealthCharacteristicsBar :reqData="reqData"></DailyHealthCharacteristicsBar>
              </div>
            </div>
          </template>
        </BlackBorder>
      </div>
      <div class="w-full">
        <BlackBorder title="用户性别年龄分布图">
          <template #content>
            <LeftUserGenderAndAgeChart :reqData="reqData"></LeftUserGenderAndAgeChart>
          </template>
        </BlackBorder>
      </div>
    </div>
  </div>
</template>
<script setup>
import BlackBorder from '@/views/components/BlackBorder.vue'

// 健康环形
import Healthy from '@/views/components/Left/Healthy.vue'
// 亚健康环形
import SubHealth from '@/views/components/Left/SubHealth.vue'
// 风险环形
import Risk from '@/views/components/Left/Risk.vue'
// 疾病
import Disease from '@/views/components/Left/Disease.vue'
// 每日健康特征柱状图
import DailyHealthCharacteristicsBar from '@/views/components/Left/DailyHealthCharacteristicsBar.vue'
// 用户性别年龄分布图
import LeftUserGenderAndAgeChart from '@/views/components/Left/LeftUserGenderAndAgeChart.vue'
import { ref, watch } from 'vue'

const defineProps = defineProps({
  data: Object
})

let reqData = ref()

watch(
  () => defineProps.data,
  (val) => {
    reqData.value = val
  }
)
</script>
<style scoped lang="scss">
.bg {
  width: 2.2604rem /* 434/192 */;
  height: 1.703125rem /* 327/192 */;
  background: url('@/image/bg3.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 0.03125rem /* 6/192 */;

  .title {
    font-family: 'alimamashuheiti';
    color: #4adde4;
    font-size: 0.0729rem /* 14/192 */;
    margin-top: 0.0208rem /* 4/192 */;
    margin-bottom: 0.0625rem /* 12/192 */;
  }
}
</style>
